<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>华富</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/common.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui-pull-refresh.css" />
    <link rel="stylesheet" type="text/css" href="../../css/swiper.min.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/style.css"/>
</head>
<style>
  html,body {
    font-size: 1.2rem;
    background: #ffffff;
    color: #333333 !important
  }

  .h10{
    width: 100%;
    height: 0.5rem;
    display: -webkit-box;
    clear: both;
    background: #f5f5f5
  }
    .aui-active .aui-bar-tab-label{
      color: #f5a51c
    }


    [v-cloak] {
        display: none;
    }
    header,.aui-bar,.aui-bar-nav{
      font-size: 1.2rem;
      color: #333 !important;
      background:#fff;
      box-shadow: 0rem 0rem 0.8rem 0rem
		rgba(126, 126, 126, 0.52);
    border-bottom: none;
    margin-top: 0 !important;
    }
    .aui-pull-left{
      font-size: 1.2rem;
    }
    .aui-pull-left .aui-iconfont{
      font-size: 1.2rem;

    }
    .aui-searchbar{
      background-color: transparent !important;
      height:4.4rem;
    }
    .aui-searchbar-input{
      height:2.8rem;
      line-height: 2.8rem;
      padding-left:0.9rem;
      margin: 0 0 0 3.3rem;
      border-radius: 0.3rem;
      position: relative;
    }

    .aui-bar-nav .aui-title{
      right: 4rem;
      left: 0rem;
    }
    body {background: #F6F6F9;color: #333;margin: 0 auto;font-weight: normal;}
    ul,ol{list-style: none;padding: 0px;margin: 0px;;}


    /*滚动条样式*/
    .scrollbar-none::-webkit-scrollbar {/*滚动条宽度设置*/
        width: 0px;height: 0;
    }
    header, .aui-bar-nav{
      padding-top:0;
    }
    .aui-searchbar .aui-iconfont{
      line-height: 2.8rem;
      margin-right: 1rem;
      color: #9e9e9e !important;
      font-size: 1.6rem;
    }
    .aui-searchbar-input input{
      height: 2.8rem;
      font-size: 1.3rem;
    }
    .aui-bar-nav .aui-pull-right.class_nav{
      top:1.3rem;
      right:1.3rem;
      padding:0;
      height:1.6rem;
      line-height: 1.6rem;
    }
    .aui-bar-nav .aui-pull-left.class_nav1{
      top:1.3rem;
      left:1.3rem;
      padding:0;
      height:1.7rem;
      line-height: 1.7rem;
    }
    .class_nav img{
      height:1.7rem;
    }
    .class_nav1 img{
      height:1.7rem;
    }
    .class_nav span{
      position: absolute;
      top: -0.5rem;
      right: -0.5rem;
      width: 1.2rem;
    	height: 1.2rem;
      line-height: 1.2rem;
    	background-color: #ed6a20;
      font-size:1rem;
      color:#fff;
      border-radius: 100%;
    }
    .class_nav_title .shao{
      position: absolute;
      width:1.3rem;
      top:0.75rem;
      right:0.75rem;
    }
    .con1{
      padding-top:6.9rem;
      background:#fafafa;
    }
    .fl{
      float:left;
    }
    .fr{
      float:right;
    }

    /***index_product***/
    .index_product{
      width: 100%;
    }
    .index_product_con{
      width: 100%;
      padding:0.4rem;
    }
    .index_product_list{
      width: 100%;
      background: #fff;
      border-radius: 0.5rem;
      overflow: hidden;
      margin-bottom: 0.4rem;
      box-shadow: -0.04rem 0.03rem 0.35rem 0.01rem rgba(0, 0, 0, 0.08);
    }
    .index_product_zi{
      padding: 1.3rem 0.9rem;
    }
    .index_product_zi h5{
      font-size: 1.3rem;
      line-height: 1.2;
      color: #0a0a0a;
      margin-bottom: 1.2rem;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
    }
    .index_product_zi h5 font{
      display: inline-block;
      line-height: 1.5rem;
      font-size: 1rem;
      color: #fff;
      background: #ed6a20;
      border-radius: 0.2rem;
      margin-right: 0.2rem;
      padding: 0 0.4rem;
      vertical-align: top;
    }
    .index_product_zi p{
      font-size: 1.5rem;
      color: #f01818;
      line-height: 1.2;
    }
    .index_product_zi p span{
      float: right;
      line-height: 2rem;
      font-size: 1.1rem;
      color: #666666;
      border: 1px solid #999;
      padding: 0 1rem;
      border-radius: 2rem;
      position: relative;
      top: -0.2rem;
    }

    /*tab*/
    .shopClassify_nav{
      border:1px solid #eeeeee;
      position: relative;
      z-index: 3;
    }

    .shopClassify_nav .aui-tab-item.aui-active {
        border-bottom: none;
    }

    .shopClassify_nav .aui-tab-item{
        color: #666;
        font-size: 0.7rem;
        font-weight: 600;
        height:4.4rem;
        line-height: 4.4rem;
        position: relative;
    }

    .shopClassify_nav .aui-tab-item.aui-active {
        color: #ed6a20;
    }
    .shopClassify_nav .aui-tab-item {
        color: #000;
        font-size:1.4rem;
    }

    .shopClassify_nav .aui-tab-item.uown::before {
        content: '';
        border: 4px solid transparent;
        border-bottom: 5px solid #999;
        position: absolute;
        left: 72%;
        top: 0;
        bottom: 0px;
        margin: auto;
        height: 0;
        width: 0;
        transform: translateY(-60%);
    }

    .shopClassify_nav .aui-tab-item.uown::after {
        content: '';
        border: 4px solid transparent;
        border-top: 5px solid #999;
        position: absolute;
        left: 72%;
        top: 0;
        bottom: 0;
        margin: auto;
        height: 0;
        width: 0;
        transform: translateY(60%);
    }

    .shopClassify_nav .aui-tab-item.aui-active.uown.up::before {
        border-bottom-color: #ed6a20;
        /*border-bottom: 5px solid #ff0137;*/
    }

    .shopClassify_nav .aui-tab-item.aui-active.uown.down::after {
        border-top-color: #ed6a20;
        /*border-top: 5px solid #ff0137;*/
    }
    /***index_product***/
    .aui-toast-content {
        color: #fff;
    }
</style>
<body>
<div id="app" style="position:relative;" v-cloak>

  <header id="header_top" class="aui-bar aui-bar-nav " style="position:fixed;top:0;height:6.9rem;padding-top:2.5rem;">

    <div class="aui-title class_nav_title">
      <div class="aui-searchbar" id="search">
          <div class="aui-searchbar-input aui-border-radius" tapmode onclick="doSearch()" style="background:#f6f6f6">
              <i class="aui-iconfont aui-icon-search"></i>
              <form action="javascript:;">
                  <input type="search" placeholder="请输入搜索内容" id="search-input">
              </form>
              <div class="shao">
                <img src="../../image/search_icon1.png" alt="">
              </div>
          </div>

      </div>

    </div>
    <a class="aui-pull-right aui-btn class_nav">
        <img src="../../image/class/share_index_nav3.png" alt="">
        <span>5</span>
    </a>
    <a class="aui-pull-left aui-btn class_nav1" onclick="close_win()">
        <img src="../../image/back.png" alt="">
    </a>
  </header>
  <div class="aui-refresh-content">
    <div class="con1">
      <div class="index_product">
        <div class="shopClassify_nav">
          <div class="aui-tab" id="tab1">
               <div class="aui-tab-item aui-active">综合</div>
               <div class="aui-tab-item uown">销量</div>
               <div class="aui-tab-item uown">上新</div>
               <div class="aui-tab-item uown">价格</div>
           </div>
        </div>
        <div class="index_product_con">
           <div class="row clearfix clm2">
             <div class="col-xs-6 clp2" v-for="item in storeList">
                 <div class="index_product_list">
                     <img :src=item.goods_logo width="100%">
                     <div class="index_product_zi">
                         <h5><font>{{item.store_id | storeType}}</font>{{item.goods_name}}</h5>
                         <p>¥{{item.goods_price}} <span>已售{{item.sales}}</span></p>
                     </div>
                 </div>
             </div>
           </div>
        </div>
      </div>
    </div>
	</div>
</div>
</body>
</html>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/zepto.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript" src="../../script/utils.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/aui-scroll.js"></script>
<script type="text/javascript" src="../../script/aui-pull-refresh.js"></script>
<script type="text/javascript" src="../../script/aui-tab.js"></script>
<script type="text/javascript" src="../../script/swiper.min.js"></script>
<script type="text/javascript" src="../../script/aui-toast.js"></script>

<script type="text/javascript">
var app;
function doSearch(){
    var searchValue = document.getElementById("search-input").value;
    if(searchValue){
        // api.toast({
        //     msg: searchValue,
        //     duration: 2000,
        //     location: 'bottom'
        // });

    }
}
  apiready = function(){
    var toast = new auiToast({})
    app = new Vue({
        el: '#app',
        data: {
          page:1,
          allpage:'',
          storeList:[]
        },
        created: function() {
          api.showProgress({
              title: '努力加载中...',
              text: '先喝杯茶...',
              modal: false
          });

        },
        methods: {
          //刷新
          setRefresh:function(){
              var pullRefresh = new auiPullToRefresh({
                  container: document.querySelector('.aui-refresh-content'),
                  triggerDistance: 100
              }, function(ret) {
                  if (ret.status == "success") {
                      setTimeout(function() {
                          pullRefresh.cancelLoading(); //刷新成功后调用此方法隐藏
                      }, 1500)
                  }
              })
          },
          tabNav:function() {
              var _this = this;
              var prevIndex = 1

              var tab1 = new auiTab({
                  element: document.getElementById("tab1"),
                  repeatClick: true
              }, function(ret) {
                  if (ret.index == 1) {
                      _this.storeIndex()
                      $('.shopClassify_nav .aui-tab-item').eq(1).removeClass('up down');
                      $('.shopClassify_nav .aui-tab-item').eq(2).removeClass('up down');
                      $('.shopClassify_nav .aui-tab-item').eq(3).removeClass('up down');
                  } else if (ret.index == 2) {
                    if (prevIndex == ret.index) {
                        $('.shopClassify_nav .aui-tab-item').eq(1).toggleClass('up')
                        $('.shopClassify_nav .aui-tab-item').eq(1).toggleClass('down')
                        $('.shopClassify_nav .aui-tab-item').eq(1).attr('class').indexOf('up')=='-1' ? _this.storeIndex('',4):_this.storeIndex('',3)
                    } else {
                        $('.shopClassify_nav .aui-tab-item').eq(1).addClass('up')
                         _this.storeIndex('',3)
                    }
                  } else if (ret.index == 3) {
                      if (prevIndex == ret.index) {
                          $('.shopClassify_nav .aui-tab-item').eq(2).toggleClass('up')
                          $('.shopClassify_nav .aui-tab-item').eq(2).toggleClass('down')
                          $('.shopClassify_nav .aui-tab-item').eq(2).attr('class').indexOf('up')=='-1' ? _this.storeIndex('',6):_this.storeIndex('',5)
                      } else {
                          $('.shopClassify_nav .aui-tab-item').eq(2).addClass('up')
                          _this.storeIndex('',5)
                      }
                  } else if (ret.index == 4) {
                    if (prevIndex == ret.index) {
                        $('.shopClassify_nav .aui-tab-item').eq(3).toggleClass('up')
                        $('.shopClassify_nav .aui-tab-item').eq(3).toggleClass('down')
                        $('.shopClassify_nav .aui-tab-item').eq(3).attr('class').indexOf('up')=='-1' ? _this.storeIndex('',2):_this.storeIndex('',1)
                    } else {
                        $('.shopClassify_nav .aui-tab-item').eq(3).addClass('up')
                        _this.storeIndex('',1)
                    }
                  }
                  prevIndex = ret.index
              });
          },
          //搜索
          searchMsg:function(){
            var _this = this

            $("#search-input").on("keypress",function(e){
                e.keyCode==13 ? _this.storeIndex($('#search-input').val(),'') : ''
            })
          },
          storeIndex: function(keywords,sorts) {
              var _this = this
              var data = {
                  token: $api.getStorage('token'),
                  store_id: api.pageParam.id,
                  cate_id:api.pageParam.typeId || "",
                  keywords: keywords || "",
                  sorts: sorts || 0,
                  page: 1
              }
            //  console.log(sorts)
              api.ajax({
                  url: window.hurl.store_index,
                  method: 'post',
                  data: {
                      values: data
                  }
              }, function(ret, err) {
                  if (ret) {
                      //console.log('分类：'+JSON.stringify(ret));
                      if (ret.status == 1) {
                          _this.storeList = ret.store_goods_list
                          if(ret.store_goods_list==""){
                              toast.fail({title:'没有商品',duration:1000})
                          }
                          _this.allpage = ret.search_data.all_page
                          _this.page = ret.search_data.page
                      }
                  } else {
                      console.log(JSON.stringify(err));
                  }
              });

          }
        },
        mounted: function () {
          var $_this = this
          api.hideProgress();
          this.tabNav();
          this.setRefresh();
          this.storeIndex()
          this.searchMsg()
          var scroll = new auiScroll({
            listen:true, //是否监听滚动高度，开启后将实时返回滚动高度
            distance:40 //判断到达底部的距离，isToBottom为true
          },function(ret){
              if (ret.isToBottom) {
                  $_this.page ++
                  if ($_this.page > $_this.allpage) {
                      $_this.page = $_this.allpage
                      return
                  }
                  api.ajax({
                      url: window.hurl.store_index,
                      method: 'post',
                      data: {
                          values: {
                              token: $api.getStorage('token'),
                              store_id: api.pageParam.id,
                              cate_id:api.pageParam.typeId || "",
                              keywords: '',
                              sorts: '',
                              page: $_this.page
                          }
                      },
                      timeout: 300,
                  }, function(ret, err) {
                      if (ret) {
                          //  api.alert({ msg: JSON.stringify(ret) });
                          $_this.storeList = $_this.storeList.concat(ret.store_goods_list)

                      } else {
                          api.alert({ msg: JSON.stringify(err) });
                      }
                  })
              }

          })
        },
        filters:{
          storeType:function(value){
            switch (Number(value)) {
              case 1:
              return '褚氏'
              break;
              case 2:
              return '代理'
              break;
              case 3:
              return '个人'
              break;
            }
          }
        }
      })

  }

  function close_win(){
    api.closeWin({});
  }

  function goDetail(){
    api.openWin({
        name: 'classDetailHeader',
        url: './class_detail_header.html',
        pageParam: {
            test:''
        }
    });
  }


  function openFilter() {
        api.openFrame({
            name: 'classClassifyFilter',
            url: './class_classify_filter.html',
            pageParam:{

            }
        })
    }



</script>
